<template>
  <div class="performance">
     <mt-tabbar v-model="selected">
      <mt-tab-item id="home">
        <i class="fa-shopping-cart fa"></i>
        全部商品
      </mt-tab-item>
      <mt-tab-item id="myinfo">
        <i class="fa-home fa icon-tabbar"></i>
        我的信息
      </mt-tab-item>
      <mt-tab-item id="performance">
        <i class="fa-bar-chart fa icon-tabbar"></i>
        绩效
      </mt-tab-item>
    </mt-tabbar>
    <span class="totalTime">{{totalDate}}</span>
    <div class="personRecord item-border">
        <span class="title">个人当月奖金</span>
        <div class="reward">{{personSale+'元'}}</div>
        <div class="show-person-box">
          <!-- <span class="lastMonMoney">个人上月奖金{{lastMonMoney}}</span> -->
          <span class="toDetail" @click='toDetail(0)'>查看详情</span>
        </div>
    </div>
     <div class="teamRecord" @click="navigation">
        <span class="title">团队当月销售总额</span>
        <div class="reward">{{groupSale+'元'}}</div>
        <div class="show-person-box">
          <!-- <span class="lastMonMoney">团队上销售总额{{lastMonMoney}}</span> -->
          <span class="toDetail"  @click='toDetail(1)'>查看详情</span>
        </div>
    </div>
  </div>
</template>

<script>
import MyTabbar from "@/components/Tabbar/index";
import MyTabbarItem from "@/components/Tabbar/TabbarItem";
import getPerformanceApi from '@/api/performance'
export default {
  components: {
    MyTabbar,
    MyTabbarItem
  },
  data: () => {
    return {
      totalDate:'',
      personSale: '',
      groupSale: '',
      lastMonMoney:'',
      selected: "performance"
    };
  },
  watch: {
    selected: function (newValue) {
      if (newValue === "home") {
        window.location.href = "products.html";
      } else if (newValue === "performance") {
        window.location.href = "performance.html";
      } else if (newValue === "myinfo") {
        window.location.href = "my_info.html";
      }
    }
  },
  mounted() {
    this.$Central.$emit("loading", true);
    var memberId = 2;
    getPerformanceApi.getPersonCurrentStats(memberId).then(
      response => {
        this.$Central.$emit("loading", false);
        if (response.data.code == 0) {
          this.totalDate = response.data.data.currentMonth;
          this.personSale = response.data.data.personSale;
          this.groupSale = response.data.data.groupSale;
          //          this.list = response.data.data
        } else {
          this.$Utils.$toast("获取绩效信息失败，失败信息:" + response.data.message);
        }
      },
      err => {
        this.$Utils.$toast("系统错误，获取绩效信息失败!");
        this.$Central.$emit("loading", false);
      }
    );
  },
  methods: {
    goBack() {
      console.log("do");
    },
    handle($event) {
      console.log($event);
    },
    gettotalTime() {
      var totalTime = new Date();
      this.total = totalTime;
    },
    navigation() {
      window.location.href = "person_performance.html";
    },
    toDetail(type) {
      if (type == 0) {
        window.location.href = "www.baidu.com";
      } else if (type == 1) {
        window.location.href = "www.qq.com";
      }
    }
  },
  name: "performance"
};
</script>

<style lang="scss" scoped="">
@import "../assets/css/px2rem";
@import "../assets/css/variable";
.performance {
  height: auto;
  &::before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: $performanceTextColor; /* 颜色自定义 */
    z-index: -100;
  }
  .totalTime {
    font-size: 0.65rem;
    color: $performanceTextBg;
    padding: 0.5rem 0.5rem;
    display: inline-block;
  }
  .personRecord,
  .teamRecord {
    margin-bottom: 1rem;
    text-align: center;
    font-size: 0.75rem;
    padding: 0.5rem 0;
    background-color: $performancebackground;
    border-radius: 0.6rem;
    width: 95%;
    margin: 0 auto;
    border: 1px solid #999999;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    .title {
      color: $performanceTextColor;
      width: 90%;
      margin: 0 auto;
      display: block;
      font-size: 0.8rem;
      font-weight: bold;
    }
    .reward {
      width: 90%;
      height: 2rem;
      line-height: 2rem;
      margin: 0 auto;
      font-size: 1.2rem;
      color: $performanceTextColor;
      font-weight: bold;
      padding: 0.5rem 0;
    }
    .show-person-box {
      color: $performanceTextColor;
      .lastMonMoney {
        display: inline-block;
        width: 70%;
        text-align: left;
      }
      .toDetail {
        display: inline-block;
        text-align: right;
        font-size: 0.65rem;
      }
    }
  }
  .item-border {
    margin-bottom: 1rem;
  }
  /* 固定头部样式 */
  .mint-tabbar {
    width: 100%;
    position: static !important;
    bottom: 0;
    left: 0;
  }
  .mint-tab-item {
    height: 1.8rem !important;
  }
}
</style>
